<template>
  <div class="header">
    <div class="top">
      <div class="container">
        <div class="top-left">德亨信息 - 专注于世界沟通</div>
        <div class="top-right">
          <ul>
            <li>登录</li>
            <li>注册</li>
            <li>我的订单</li>
            <li>在线客服</li>
            <li>帮助中心</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="container">
        <div class="menu-left">
          <h1>特殊钢交易平台</h1>
          <p>1个全面的材料查询平台</p>
        </div>
        <div class="menu-right">
          <div class="nav">
            <ul>
              <li>首页</li>
              <li>国产钢材</li>
              <li>进口钢材</li>
              <li>塑料模具钢</li>
              <li>冷作模具钢</li>
              <li>热作模具钢</li>
              <li>圆钢</li>
              <li>高速工具钢</li>
            </ul>
          </div>
          <div class="search">
            <input placeholder="输入关键字进行搜索" />
            <button>搜索</button>
          </div>
          <div class="shippng-car">
            <img src="@/assets/images/shopping-car.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'headerCommd'
}
</script>

<style lang="scss" scoped>
  .header {
    background: #fff;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 10px;
  }

  .top {
    background: $sBgColor;
    height: 40px;
    line-height: 40px;
    color: $qGray;

    &-left {
      float: left;
    };

    &-right {
      float: right;

      ul {
        padding: 0;

        li {
          list-style: none;
          float: left;
          margin: 0 10px;
          cursor: pointer;
        };
      };
    };
  }

  .menu {
    height: 95px;
    padding-top: 20px;

    &-left {
      float: left;

      h1 {
        color: $redColor;
        font-size: 2.3em;
      };

      p {
        color: $qBgColor;
        font-size: 1.2em;
        line-height: 1.8em;
      };
    };

    &-right {
      float: right;
      padding-top: 28px;

      .nav {
        float: left;
        margin-top: 4px;

        ul {
          padding: 0;

          li {
            list-style: none;
            float: left;
            margin: 0 10px;
            cursor: pointer;
            font-size: 1.2em;

            &:hover {
              color: $redColor;
            };
          };
        };
      };

      .search {
        float: left;
        margin-left: 20px;

        input {
          border: 1px solid #ccc;
          line-height: 30px;
          padding: 0 10px;
          width: 150px;
          float: left;
        };

        button {
          border: 1px solid $sBgColor;
          cursor: pointer;
          float: left;
          background: $sBgColor;
          height: 32px;
          color: #fff;
          padding: 0 15px;
        }
      };

      .shippng-car {
        float: left;
        margin-left: 20px;
        margin-top: 5px;
      }
    };
  }
</style>
